import React from 'react'
import { useState } from 'react';
import { Divider, List, Typography } from 'antd';
import HomeHttp from '../apis/home'
export default function Table({ id }) {

  const [list, setList] = useState([])
  const [name,setName]=useState('')
  React.useEffect(() => {
    HomeHttp.listInfor(id)
      .then(res => {
        setList([...res.playlist.tracks])
        setName(res.playlist.name)
        console.log('榜单',res);
      })
  }, [id])

  return (
    <>
         {/* <Divider orientation="left">Default Size</Divider> */}
    <List
      header={<div>{name}</div>}
      footer={<div>更多</div>}
      bordered
      dataSource={list}
      renderItem={(item) => (
        <List.Item key={item.id}>
           {item.name}
        </List.Item>
      )}
    />
    </>
  )
}
